<!--代码逻辑和样式库-->
<script src="./department-manage.component.js"></script>
<style src="./department-manage.scss" scoped lang="scss"></style>

<template>
  <div>
    <div class="search-container">
      <el-form :model="searchForm" label-position="top" label-width="80px">
        <div class="aq-padding-bottom-8">数据筛选</div>
        <el-row :gutter="30" type="flex">
          <el-col :span="7">
            <el-form-item class="aq-form-card">
              <div>部门编码<span class="aq-search-text">请输入6位部门编码</span></div>
              <el-input prefix-icon="el-icon-search" v-model="searchForm.code" placeholder="请输入部门编码" @keyup.enter.native="search"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item class="aq-form-card">
              <div>部门名称<span class="aq-search-text">请输入部门名称,支持模糊搜索</span></div>
              <el-input prefix-icon="el-icon-search" v-model="searchForm.queryStr" placeholder="请输入部门名称" @keyup.enter.native="search"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <div class="aq-search-button aq-primary-button" @click="search()">筛选</div>
          </el-col>
          <el-col :span="2">
            <div class="aq-search-button aq-warning-button" @click="onReset()">重置</div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 内容区域 -->
    <div class="content-container">
      <el-row :gutter="30">
        <el-col :span="7">
          <div>组织架构</div>
          <el-tree :data="structsTree" default-expand-all node-key="objectId" @node-click="getSelectNode" :expand-on-click-node="false">
            <span v-if="node.level <= 2" slot-scope="{ node,data }">
              <span>{{ data.name }}</span>
              <span class="aq-padding-left-12">
                <el-button v-if="node.level !== 1" class="aq-text-color-primary aq-text-size-medium" type="text" icon="el-icon-plus" @click="openCreateOrEditDialog('create',data)"></el-button>
                <el-button class="aq-text-color-success aq-text-size-medium" type="text" icon="el-icon-edit" @click="openCreateOrEditDialog('editTree',data)"></el-button>
              </span>
            </span>
          </el-tree>
        </el-col>
        <el-col :span="17">
          <div>部门列表</div>
          <el-button class="aq-margin-top-12 aq-margin-bottom-12" type="danger" @click="deleteSelectedData()">批量删除</el-button>
          <div>
            <!--用户列表table-->
            <el-table :data="data" border fit highlight-current-row @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55" align="center" fixed></el-table-column>
              <el-table-column type="index" :index="setIndex" label="序号" width="55" />
              <el-table-column prop="code" label="部门编码">
                <template slot-scope="scope">
                  <el-link @click="openDetailDialog(scope.row)" type="primary">{{ scope.row.code }}</el-link>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="部门名称" />
              <el-table-column prop="superName" label="所属组织" />
              <el-table-column prop="description" label="部门描述" />
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button v-if="codesCheck.indexOf('Edit') != -1" plain type="success" size="mini" @click="openCreateOrEditDialog('edit', scope.row)">编辑</el-button>
                  <el-button v-if="codesCheck.indexOf('Delete') != -1" plain type="danger" size="mini" @click="deleteSelectedData(scope.row.objectId,scope.row.name)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页插件 -->
            <pagination v-show="totalNum > 0" :total="totalNum" :page.sync="pageNum" :limit.sync="recordNum" @pagination="getSysStructsList" />
          </div>
        </el-col>
      </el-row>
    </div>
    <create-department v-if="createOrEditDialogVisible" :type="type" :struct="selectRow" @reload="reload()" @close="closeCreateOrEditDialog"></create-department>
    <department-detail v-if="detailDialogVisible" :struct-id="selectRow.objectId" @close="closeDetailDialog"></department-detail>
  </div>
</template>
